<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>花龙腾航 - 机票预订系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    .auth-container {
      background: linear-gradient(135deg, rgba(30, 58, 138, 0.8) 0%, rgba(79, 70, 229, 0.8) 100%);
    }

    .auth-card {
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.85);
    }

    .tab-active {
      border-bottom: 3px solid #4f46e5;
      color: #4f46e5;
      font-weight: 600;
    }

    .input-focus:focus {
      box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.5);
    }

    .switch-user-type {
      transition: all 0.3s ease;
    }

    .switch-user-type.active {
      background-color: #4f46e5;
      color: white;
    }

    .airplane-bg {
      background-image: url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
      background-size: cover;
      background-position: center;
    }
  </style>
</head>
<body class="bg-gray-100 font-sans">
<div class="min-h-screen flex">
  <!-- 左侧背景图 -->
  <div class="hidden lg:block w-1/2 airplane-bg relative">
    <div class="absolute inset-0 bg-indigo-900 bg-opacity-60 flex items-center justify-center">
      <div class="text-white px-16">
        <h1 class="text-5xl font-bold mb-6">花龙腾航</h1>
        <p class="text-xl mb-8">探索世界，从花龙腾航开始</p>
        <div class="flex items-center">
          <div class="w-12 h-1 bg-indigo-400 mr-4"></div>
          <span class="text-indigo-300">您的旅程，我们的承诺</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 右侧登录/注册区域 -->
  <div class="w-full lg:w-1/2 flex items-center justify-center p-8">
    <div class="w-full max-w-md">
      <!-- 品牌标志 -->
      <div class="flex items-center justify-center mb-10">
        <i class="fas fa-plane-departure text-4xl text-indigo-600 mr-3"></i>
        <h1 class="text-3xl font-bold text-indigo-800">花龙腾航</h1>
      </div>

      <!-- 用户类型切换 -->
      <div class="flex justify-center mb-8 bg-gray-100 rounded-full p-1">
        <button id="user-btn" class="switch-user-type px-6 py-2 rounded-full focus:outline-none">
          <i class="fas fa-user-shield mr-2"></i> 用户登录
        </button>
        <button id="admin-btn" class="switch-user-type active px-6 py-2 rounded-full focus:outline-none">
          <i class="fas fa-user mr-2"></i> 管理员
        </button>
      </div>

      <!-- 管理员登录表单 -->
      <form method="post" action="manager_login">
        <div id="admin-login-form" class="space-y-6">
          <div class="text-center mb-6">
            <i class="fas fa-user-shield text-4xl text-indigo-600 mb-3"></i>
            <h2 class="text-xl font-semibold text-gray-800">管理员登录</h2>
            <p class="text-sm text-gray-500 mt-1">请输入管理员凭据以访问后台系统</p>
          </div>

          <div>
            <label for="admin-username" class="block text-sm font-medium text-gray-700 mb-1">管理员账号</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fas fa-user-tie text-gray-400"></i>
              </div>
              <input type="text" id="admin-username" class="input-focus w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none" placeholder="请输入管理员账号" name="m_account">
            </div>
          </div>

          <div>
            <label for="admin-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fas fa-key text-gray-400"></i>
              </div>
              <input type="password" id="admin-password" class="input-focus w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none" placeholder="请输入密码" name="m_password">
            </div>
          </div>

          <div class="flex items-center">
            <input name="remember-me" id="admin-remember" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
            <label for="admin-remember" class="ml-2 block text-sm text-gray-700">信任此设备</label>
          </div>

          <div>
            <p th:if="${manager_login_failure}" style="color: red">您的账号或密码错误！</p>
          </div>

          <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            <i class="fas fa-sign-in-alt mr-2"></i> 管理员登录
          </button>

          <div class="text-center text-sm text-gray-500 mt-4">
            <i class="fas fa-exclamation-circle mr-1"></i> 此系统仅供授权人员使用
          </div>
        </div>
      </form>

    </div>
  </div>
</div>

<script>

  // 切换用户/管理员模式
  document.getElementById('user-btn').addEventListener('click', function() {
    window.location.href = 'user_login';
  });

  document.getElementById('admin-btn').addEventListener('click', function() {
    window.location.href = 'manager_login';
  });

  // 密码显示/隐藏切换
  document.querySelectorAll('.fa-eye').forEach(icon => {
    icon.addEventListener('click', function() {
      const input = this.closest('.relative').querySelector('input');
      if (input.type === 'password') {
        input.type = 'text';
        this.classList.remove('fa-eye');
        this.classList.add('fa-eye-slash');
      } else {
        input.type = 'password';
        this.classList.remove('fa-eye-slash');
        this.classList.add('fa-eye');
      }
    });
  });
</script>
</body>
</html>